<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<p:dialog xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" 
	modal="true" width="900" height="600" resizable="false" 
	widgetVar="dialogAddCliente" id="dialogCliente" closable="false"
	appendToBody="true">

	<link type="text/css" rel="stylesheet" href="../../resources/css/style.css" />
	
	<f:facet name="header">
		<h:outputText value="Cadastrar Cliente" />
	</f:facet>
	
	<h:form id="formAddCliente" prependId="false">
		<h:panelGroup id="panelCliente">
		<p:messages id="messageFormCliente"/>

			<h:panelGrid columns="4" style="padding:5px;">
				<h:outputText value="Código" />
				<h:outputText value="Nome *" />
				<h:outputText value="Data de nascimento" />
				<h:outputText value="Sexo" />
				
				<p:inputText style="width:100px;" disabled="true" value="#{vendaBean.newCliente.id}"/>
				<p:inputText style="width:400px;" value="#{vendaBean.newCliente.nome}" required="true" requiredMessage="Informe o nome." maxlength="100"/>
				<p:inputMask mask="99/99/9999" style="width:120px;" value="#{vendaBean.newCliente.dataNascimento}">
					<f:convertDateTime pattern="dd/MM/yyyy"/>
				</p:inputMask>
				<p:selectOneRadio id="options" value="#{vendaBean.newCliente.sexo}">  
            		<f:selectItem itemLabel="Masculino" itemValue="M" />  
           			<f:selectItem itemLabel="Feminino" itemValue="F" />  
        		</p:selectOneRadio> 
			</h:panelGrid>
				
			<h:panelGrid columns="4" style="padding:5px;">
				<h:outputText value="Logradouro *" />
				<h:outputText value="Número *" />
				<h:outputText value="Complemento" />
				<h:outputText value="Bairro *" />
								
				<p:inputText style="width:350px;" value="#{vendaBean.newCliente.logradouro}" maxlength="40" required="true" requiredMessage="Informe o logradouro."/>
				<p:inputText style="width:80px;" value="#{vendaBean.newCliente.numero}" maxlength="10"  required="true" requiredMessage="Informe o número."/>
				<p:inputText style="width:150px;" value="#{vendaBean.newCliente.complemento}" maxlength="20"/>
				<p:inputText style="width:200px;" value="#{vendaBean.newCliente.bairro}" maxlength="20" required="true" requiredMessage="Informe o bairro."/>
			</h:panelGrid>
			
			<h:panelGrid columns="5" style="padding:5px;">			
				<h:outputText value="CEP" />		
				<h:outputText value="Cidade *" />	
				<h:outputText value="Estado" />	
				<h:outputText value="País" />		
				<h:outputText value="" />
				
				<p:inputMask mask="99.999-999" style="width:150px;" value="#{vendaBean.newCliente.cep}"/>
				
				<p:autoComplete id="inputCidade" var="cidade" value="#{vendaBean.newCliente.cidade}" maxlength="30"
					itemLabel="#{cidade.cidade}" itemValue="#{cidade}" size="50" required="true" requiredMessage="Selecione a cidade."
					converter="cidadeConverter" completeMethod="#{vendaBean.getCidadeByQuery}">
					<p:ajax event="itemSelect" process="@this inputCidade" update="inputEstado inputPais inputDddTel inputDddCel" listener="#{vendaBean.handleCidadeSelected}"/>
				</p:autoComplete>
				
				<p:inputText style="width:200px;" disabled="true" value="#{vendaBean.newCliente.cidade.estado.estado}" id="inputEstado"/>	
				<p:inputText style="width:150px;" disabled="true" value="#{vendaBean.newCliente.cidade.estado.pais.pais}" id="inputPais"/>				
				<p:commandButton icon="ui-icon-search" style="height:24px;" actionListener="#{vendaBean.openDialogListCidade}" immediate="true" title="Selecionar cidade"/>
			</h:panelGrid>
			
			<h:panelGrid columns="5" style="padding:5px;">			
				<h:outputText value="Telefone" />		
				<h:outputText value="" />	
				<h:outputText value="Celular" />	
				<h:outputText value="" />		
				<h:outputText value="E-mail" />
				
  					<p:inputMask mask="9?9" style="width:50px;" value="#{vendaBean.newCliente.cidade.ddd}" id="inputDddTel" maxlength="2" placeHolder=" "/>					
				<p:inputMask mask="9999-9999" style="width:150px;" value="#{vendaBean.newCliente.telefone}"/>
				<p:inputMask mask="9?9" style="width:50px;"  value="#{vendaBean.newCliente.cidade.ddd}" id="inputDddCel" maxlength="2" placeHolder=" "/>	
				<p:inputMask mask="9999-9999" style="width:150px;" value="#{vendaBean.newCliente.celular}"/>
				<p:inputText style="width:370px;" value="#{vendaBean.newCliente.email}" maxlength="50"/>				
			</h:panelGrid>
			
			<h:panelGrid columns="2" style="padding:5px;">			
				<h:outputText value="RG" />
				<h:outputText value="CPF" />	
				
				<p:inputText style="width:150px;" value="#{vendaBean.newCliente.rg}" maxlength="20"/>
				<p:inputMask mask="999.999.999-99" style="width:150px;" value="#{vendaBean.newCliente.cpf}"/>
			</h:panelGrid>
			
			<h:panelGrid columns="1" style="padding:5px;">
				<h:outputText value="* Campos obrigatórios" />
			</h:panelGrid>
		
		<div id="popup-buttons" style="padding-bottom: 10px;padding-right: 15px; padding-top: 10px; text-align: right;">
			<p:commandButton value="Salvar" style="height:28px;" actionListener="#{vendaBean.saveClienteFromDialog}" process="@this panelCliente" update="panelCliente" icon="ui-icon-disk"/>
			<p:commandButton value="Cancelar" style="height:28px;" onclick="dialogAddCliente.hide()" immediate="true" icon="ui-icon-cancel"/>
		</div>
		</h:panelGroup>
	</h:form>
</p:dialog>